<script setup lang='ts'>
  import { onMounted, reactive, ref } from 'vue';
  import { DailystatisticsApi } from '@/api/controller';
  import { Toastloading } from '@/utils/public';
  import { getDateArray, getPlayEndTime, getSummaries } from '@/utils'
  import roomuserlist from '../guild_room/room/roomList/components/roomuserlist.vue';
  import xmDatePicker from '@/components/xmDatePicker/index.vue';
  import Pagination from "@/components/Pagination/index.vue";
  import table2excel from 'js-table2excel';
  const roomuserlistRef = ref()
  const action = reactive({
    total:0,
    list:[] as any[],
    timeObj:getPlayEndTime(getDateArray('ymdhis'))
  })
  const listQuery = reactive({
    page:1,
    limit:20,
    roomUid:'',
    roomName:'',
    unionUserUid:'',
  })
  const handleSerach = ()=>{
    listQuery.page = 1
    getList()
  }
  const handleCharmValFilter = ( room_id=0, formtype=0)=>{
    if(formtype < 0) return
    const { playTime, endTime } = action.timeObj
    roomuserlistRef.value.openDialog({
      room_id,
      value:[playTime,endTime],
      formtype
    })
  }
  const getList = async()=> {
    const loading = Toastloading()
    const { playTime, endTime } = action.timeObj
    const res = await DailystatisticsApi.statDailyRoomUser({
      created_st:playTime,
      created_ed:endTime,
      ...listQuery
    })
    loading.close()
    const { data=[], total=0 } = res.data
    action.total = total
    action.list = data
  }
  const handleDownload = async()=>{
    const loading = Toastloading('数据导出中')
    const { playTime, endTime } = action.timeObj
    const res = await DailystatisticsApi.statDailyRoomUser({
      page:1,
      created_st:playTime,
      created_ed:endTime,
      limit:3000
    })
    loading.close()
    const { data=[] } = res.data
    const tHeader = [
      { title: 'ID', key: "id"},
      { title: '日期', key: "date"},
      { title: '公会ID', key: "unionId"},
      { title: '公会名称', key: "union_name"},
      { title: '公会长UUID', key: "union_uuid"},
      { title: '房间ID', key: "room_id"},
      { title: '房间名称', key: "room_name"},
      { title: '总消费金额(钻石)', key: "totalDiamond"},
      { title: '消费总人数', key: "totalPeople"},
      { title: 'Android消费金额(钻石)', key: "AndroidDiamond"},
      { title: 'Android消费人数', key: "AndroidNum"},
      { title: 'IOS消费金额(钻石)', key: "iosDiamond"},
      { title: 'IOS消费人数', key: "iosNum"},
    ]
    table2excel(
      tHeader,
      data,
      `每日房间用户消费统计`)
  }
  onMounted(()=>{
    getList()
  })
</script>

<template>
  <div class="xm-content">
    <div class="xm-headTab">
      <div class="labelBox">
        <div class="labelItem">
          <div class="label">房间UID：</div>
          <el-input v-model="listQuery.roomUid" placeholder="请输入房间UID" />
        </div>
        <div class="labelItem">
          <div class="label">房间名称：</div>
          <el-input v-model="listQuery.roomName" placeholder="请输入房间名称" />
        </div>
        <div class="labelItem">
          <div class="label">公会长UUID：</div>
          <el-input v-model="listQuery.unionUserUid" placeholder="请输入公会长UUID" />
        </div>
        <xmDatePicker v-model:timeval="action.timeObj" />
        <div class="labelItem">
          <el-button type="primary" @click="handleSerach">查询</el-button>
          <el-button type="warning" @click="handleDownload">导出列表</el-button>
        </div>
      </div>
    </div>
    <el-table
      class="xm-main xm-TableCenter"
      :data="action.list"
      border
      show-summary
      :summary-method="((param:any)=>getSummaries(param,[1,2,3,4,5,6]))"
    >
      <el-table-column width="80" prop="id" label="ID" />
      <el-table-column width="150" prop="date" label="日期" />
      <el-table-column width="120" prop="unionId" label="公会ID" />
      <el-table-column width="120" prop="union_name" label="公会名称" />
      <el-table-column width="120" prop="union_uuid" label="公会长UUID" />
      <el-table-column width="100" prop="room_id" label="房间ID" />
      <el-table-column width="120" prop="room_name" label="房间名称" />
      <el-table-column label="用户总计">
        <el-table-column min-width="140" prop="totalDiamond" label="总消费金额(钻石)" />
        <el-table-column min-width="140" prop="totalPeople" label="消费总人数" />
      </el-table-column>
      <el-table-column label="Android">
        <el-table-column min-width="140" prop="AndroidDiamond" label="消费金额(钻石)" />
        <el-table-column min-width="140" prop="AndroidNum" label="消费人数" />
      </el-table-column>
      <el-table-column label="IOS">
        <el-table-column min-width="140" prop="iosDiamond" label="消费金额(钻石)" />
        <el-table-column min-width="140" prop="iosNum" label="消费人数" />
      </el-table-column>
      <el-table-column fixed="right" width="200" label="操作">
        <template #default="scoped">
          <el-button type="primary" @click="handleCharmValFilter(scoped.row.room_id,1)">魅力榜</el-button>
          <el-button type="primary" @click="handleCharmValFilter(scoped.row.room_id,2)">财富榜</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="action.total > 0" :total="action.total" v-model:page="listQuery.page"
      v-model:limit="listQuery.limit" @pagination="getList" />
    <roomuserlist ref="roomuserlistRef" />
  </div>
</template>
